<template>
 <div class="way">
    <el-card class="left">
      <div class="search">
        <el-input
          placeholder="请输入"
          prefix-icon="el-icon-search"
          size="mini"
          >
        </el-input>
      </div>
      <el-tree
        :data="tree"
        @node-expand="openNode"
        @node-click="selectNode"
      ></el-tree>
    </el-card>
    <div class="right">
      <d-list ref="dlist"></d-list>
    </div>
  </div>
</template>

<script>

import DList from './components/List.vue'
import {mapActions,mapGetters} from 'vuex'
export default {
  name: 'Department',
  components: {
    DList
  },
  data() {
    return {
    }
  },
  created() {
    this.saveHospitals()
  },
  methods: {
    ...mapActions('hospital',['saveHospitals']),
    selectNode(node) {
      const {$treeNodeId,keyword,parentKey} = node
       const dlist = this.$refs.dlist
      if($treeNodeId > 1) {
        const keys = parentKey ? [...parentKey,keyword] : [keyword]
        dlist.locationId = keys[0]
        dlist.building = keys[1] ? keys[1] : ''
        dlist.floor = keys[2] ? keys[2] : ''
      } else {
        dlist.locationId = ''
        dlist.building = ''
        dlist.floor = ''
      }
      this.$refs.dlist.getList()
    },
    openNode(node) {
      const {$treeNodeId,children,keyword,parentKey} = node
      if($treeNodeId > 1) {
        children.map(item => {
          item.parentKey = parentKey ? [...parentKey,keyword] : [keyword]
        })
      }
    }
    
  },
  computed: {
    ...mapGetters(['tree'])
  }
}
</script>


<style lang="scss" scoped>
.way {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 280px;
  height: calc(100vh - 100px);
}
.el-menu {
 margin-top: 20px; 
}
.el-menu-item {
  height: 28px;
  line-height: 28px;
}
.right {
  // flex: 1;
  width: calc(100% - 300px);
  margin-left: 20px;
}
</style>